<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="follow-editor" v-if="module" v-cloak>
    <el-tabs :stretch="true" v-model="activeTab">
      <el-tab-pane label="基础" name="base">
        <el-form-item label="按钮行数">
            <el-input-number size="mini" v-model="module.data.btnrow" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="按钮列数">
            <el-radio-group v-model="module.data.styleName">
                <el-radio :label="4">4列</el-radio>
                <el-radio :label="5">5列</el-radio>
            </el-radio-group>
        </el-form-item>
        <div class="btns">
          <el-button @click="addHandle" icon="el-icon-plus" type="primary" plain size="mini"
            >新增按钮</el-button>
        </div>

        <draggable class="nav-list" filter=".nav-item.new" v-model="module.items">
          <div class="nav-list-li" v-for="(nav, index) in module.items" :nav="nav" :key="index">
            <div class="icon">
              <el-image
                style="width: 30px; height: 30px"
                :src="nav.iconUrl"
              ></el-image>
            </div>
            <div class="name">
              {{ nav.name }}
            </div>
            <div class="public" :style="{ color: nav.public ? 'green' : 'red' }">
              {{ nav.public ? "已显示" : "未显示" }}
            </div>
            <div class="actions">
              <el-link type="primary" @click="editHandle(nav,index)">修改</el-link>
              <el-link type="danger" @click="deleteHandle(nav,index)">删除</el-link>
            </div>
          </div>
        </draggable>
      </el-tab-pane>

      <el-tab-pane label="标题" name="header">
            <header-editor :module="module.header" v-if="module.header"></header-editor>
        </el-tab-pane>

        <el-tab-pane label="样式" name="style">
            <module-style-editor :module="module"></module-style-editor>
        </el-tab-pane>
        <itemForm @add="addNewItem" @update="updateItem" ref="itemForm"></itemForm>
    </el-tabs>
  </div>
</template>

<script>
import FontEditor from "../base/FontEditor";
import LinkEditor from "@/components/LinkEditor";
import ModuleStyleEditor from "../ModuleStyleEditor/Index";
import VueInputTag from "vue-input-tag";
import draggable from "vuedraggable";
import ImagePicker from "@/components/ImagePicker";
import HeaderEditor from "../base/HeaderEditor";
import itemForm from './itemForm.vue';

export default {
  components: {
    FontEditor,
    LinkEditor,
    HeaderEditor,
    ModuleStyleEditor,
    VueInputTag,
    ImagePicker,
    draggable,
    itemForm,
  },
  data() {
    return {
      predefineColors: ["#f9f9f9", "#f4f4f4", "#cecece"],
      activeTab: "base",
      loading: false,
      tagValue: "",
      // 标题的样式
      styleItems: [
        { name: "1", value: "normal" },
        { name: "2", value: "round" },
      ],
    };
  },

  watch: {},

  computed: {
    module: function () {
      return this.$store.state.pagemaker.currentModule;
    },
  },
  methods: {
    styleChangeHandle: function (val) {
      this.$set(this.module.data, "styleName", val);
    },
    editHandle(item, index){
        this.$refs.itemForm.openDialog(item, index)
    },
    addHandle(){
        this.$refs.itemForm.openDialog({
          dynamicInnerText: false
        },-1)
    },
    deleteHandle(nav,index){
        this.$confirm('是否删除该按钮', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.module.items.splice(index,1)
        })
    },
    addNewItem(item){
        this.module.items.push(item)
    },
    updateItem(item,index){
        this.module.items.splice(index,1,item)
    },
  },
};
</script>

<style scoped>
.nav-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 50px;
}

.nav-list-li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 1px solid #f3f3f3;
}

.nav-list-li .name {
    width: 100px;
}
.btns{
  display: flex;justify-content: flex-end;margin-bottom: 10px;
}
.tips {
    font-size: 12px;
    color: #666;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
</style>
